/*
 * 自定义样式
 *
 * @Author: 谢力 843926058@qq.com
 * @Date:   2018-06-06 14:08:51
 * @Last Modified by:   谢力
 * @Last Modified time: 2018-06-06 14:08:56
 */

//公共
.gradient{
	background:@base-color !important;
}
.ui-mode-box{
	position:absolute !important;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.ui-mode-container{
	background-color:#f0f2f8;
	position:relative;
	.ui-mode-content{
		position:relative;
		overflow-x:hidden;
		overflow-y:auto;
		z-index:9;
	}
}
img{
	&.app-image[lazy=loading]{
		width:20%;
		max-width:20px;
		animation:loading-rotate linear .7s infinite;
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	&.app-image[lazy=loaded]{
		position:absolute;
		max-width:100%;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		animation:fadeIn .3s ease-out forwards;
		&.auto{
			left:0;
			position:relative;
			top:0;
			transform:translate(0,0);
			width:100%;
			height:100%;
		}
		&.has-loaded{
			animation:none;
			&.auto-height{
				height:auto;
			}
		}
	}
	&.app-image[lazy=error]{
		position:absolute;
		max-width:100%;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		animation:fadeIn .3s ease-out forwards;
	}
}
@keyframes loading-rotate{
	0%{
		transform:translate(-50%,-50%) rotate(0deg);
	}
	100%{
		transform:translate(-50%,-50%) rotate(360deg);
	}
}
@keyframes fadeIn{
  	0%{
		opacity:0;
	}
  	100% {
		opacity:1;
	}
}
.mt-shoping-box{
    position: absolute;
    right: 0.5rem;
    bottom: 13.5rem;
    z-index: 999;
    border-radius: 50%;
    background: @base-color;
    width: 2rem;
    height: 2rem;
    color: #fff;
    overflow: hidden;
	cursor:default;
    i.icon{
        font-size:1rem;
    }
    span{
        position:absolute;
        z-index:2;
        right:0.3rem;
        top:0.2rem;
        height:0.8rem;
        white-space:nowrap;
        min-width:0.4rem;
        border-radius:0.8rem;
        text-align:center;
        line-height:0.8rem;
        font-size:0.5rem;
        background:rgba(255,255,255,.8);
        padding:0 0.2rem;
        color:@base-color;
    }
}
.m_add_item{
    border:solid 1px @base-color;
    overflow:hidden;
    width:2rem;
    height:2rem;
    box-shadow:0 0 0.4rem @base-color;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
    position:absolute;
    z-index:99999;
    left:100px;
    top:100px;
    img{
        width:100%;
        height:100%;
    }
	&.m_cart-leave-active{
        transition:all ease-out 0.3s;
    }
    .m_cart-leave{
        opacity: 1;
    }
    &.m_cart-leave-to{
        opacity: 0;
    }
}
.mint-swipe-indicators{
	line-height:0.5rem;
	z-index:10;
	bottom:0.3rem;
	.mint-swipe-indicator{
		width:0.3rem;
		height:0.3rem;
		margin:0.1rem;
		border:solid 1px @base-color;
		background:rgba(0,0,0,0);
		opacity:1;
		&.is-active{
			background:@base-color;
		}
	}
}
//首页底部菜单
.ui-nav-item{
	border-top:solid 1px #ddd;
	height:3rem;
	overflow:hidden;
	position:relative;
    height: calc(3rem + constant(safe-area-inset-bottom));//兼容 IOS<11.2
    height: calc(3rem + env(safe-area-inset-bottom));//兼容 IOS>11.2
    padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
    padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
	z-index:1;
	.button{
		color:#9b9b9b;
		line-height:0.2rem;
		text-align:center;
		font-size:0.6rem;
		position:relative;
		cursor:pointer;
		em{
			display:block;
			width:100%;
			height:1.7rem;
			position:relative;
			background-size:30% auto !important;
			background-position:center top !important;
			background-repeat:no-repeat;
			margin-top:-0.3rem;
			&.m1{
				background-image:url(~@/assets/images/menu/menu_1.png);
			}
			&.m2{
				background-image:url(~@/assets/images/menu/menu_2.png);
			}
			&.m3{
				background-image:url(~@/assets/images/menu/menu_3.png);
			}
			&.m4{
				background-image:url(~@/assets/images/menu/menu_4.png);
			}
			&.m5{
				background-image:url(~@/assets/images/menu/menu_5.png);
			}
		}
		&.active{
			color:@base-color;
			em{
				&.m1{
					background-image:url(~@/assets/images/menu/menu_1_select.png);
				}
				&.m2{
					background-image:url(~@/assets/images/menu/menu_2_select.png);
				}
				&.m3{
					background-image:url(~@/assets/images/menu/menu_3_select.png);
				}
				&.m4{
					background-image:url(~@/assets/images/menu/menu_4_select.png);
				}
				&.m5{
					background-image:url(~@/assets/images/menu/menu_5_select.png);
				}
			}
		}
	}
}
//公共顶部标题
.ui-header-item{
	height:2.6rem;
	line-height:2.6rem;
	position:relative;
	z-index:11;
	box-shadow:0px 5px 6px #c1c3c8;
  background-color: #ec4040;
	.ui-header-title{
		margin:0px 2.6rem;
		position:relative;
		z-index:1;
		height:2.6rem;
		text-align:center;
		font-size:0.9rem;
		color:#fff;
		font-weight:normal;
		line-height:2.6rem;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
	}
}
.ui-header-arraw{
	position:absolute;
	width:2.6rem;
	color:#fff;
	top:0;
	bottom:0;
	cursor:pointer;
	text-align:center;
	i.icon{
		font-size:1.2rem;
		font-weight:bold;
	}
	&.prev{
		left:0;
	}
	&.next{
		right:0;
	}
	&.next2{
		right:2rem;
		width:2rem;
		z-index:2;
	}
}
.ui-header-name{
	position:absolute;
	width: 7rem;
	left:0;
	top:0;
	bottom:0;
	color:#fff;
	padding:0 0.5rem;
	font-size:0.7rem;
	z-index:2;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	em{
		margin-right:0.2rem;
	}
	i{
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
}
.ui-header-search-icon{
	display:block;
	width:100%;
	height:2.6rem;
	background-image:url(~@/assets/images/search.png);
	background-size:45% auto !important;
	background-position:center center;
	background-repeat:no-repeat;
}
.ui-header-address-icon{
	position:relative;
	width:2rem;
	height:2.6rem;
	background-image:url(~@/assets/images/address.png);
	background-size:50% auto !important;
	background-position:center center;
	background-repeat:no-repeat;
}
//账本
.mt-tab-title{
    background:#fafafa;
    line-height:2rem;
    position:relative;
    padding:0 0.5rem;
    color:#9b9b9b;
    font-size:0.7rem;
    border-bottom:solid 1px #eee;
    i{
        padding:0 0.2rem;
        font-weight:bold;
    }
}
.mt-tab-inner{
    .body{
        overflow-x:hidden;
        overflow-y:auto;
        .item{
            color:#333;
            position:relative;
            padding:0.5rem;
            border-bottom:solid 1px #e1e1e1;
            .box{
                margin-right:0.3rem;
            }
            i.icon{
                color:#ddd;
                font-size:1rem;
                margin-right:-0.3rem;
            }
            p{
                color:#909090;
                line-height:1.4rem;
                font-size:0.7rem;
                position:relative;
                i.m1{
                    font-size:0.6rem;
                    font-family:Verdana;
                }
            }
            &.href{
                &:active{
                    background:#f9f9f9;
                }
            }
        }
    }
}
.scrolling-content{
    color:#9b9b9b;
	padding:0.5rem 0;
	font-size:0.6rem;
	line-height:0.8rem;
    .icon{
        width:20px;
        height:20px;
        position:relative;
        margin-right:5px;
        .app_loading-path{
            stroke:#9b9b9b !important;
        }
    }
	span.text{
		font-size:0.6rem;
	    line-height:20px;
	}
}

/* flex */
.mt-flex{display:-o-box;display:-moz-box;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.mt-flex-x{-ms-flex-direction:row;-webkit-flex-direction:row;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;flex-direction:row;}
.mt-flex-y{-ms-flex-direction:column;-webkit-flex-direction:column;-webkit-box-orient:vertical;-moz-box-orient:vertical;flex-direction:column;}
.mt-flex-center{-ms-flex-pack:center;-webkit-box-pack:center;box-pack:center;-ms-flex-align:center;-webkit-justify-content:center;-webkit-align-items:center;-webkit-align-content:center;justify-content:center;align-items:center;align-content:center;}
.mt-flex-inner{ -webkit-box-flex:1;box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.mt-flex-shrink{-webkit-flex-shrink:0;flex-shrink:0;}
.mt-flex-align-center{align-items:center;-webkit-align-items:center;box-align:center;-moz-box-align:center;-webkit-box-align:center;}
.mt-flex-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.mt-flex-align-top{align-items:flex-start;-webkit-align-items:flex-start;}
.mt-flex-img{width:100%}
.mt-flex-order{font-size: 1.6rem;width: 100%;text-align: center;color:#009faa;position: absolute;top:3.7rem;}
.mt-flex-for{font-size:0.7rem;padding: 0.426rem}

/* mt-panel-item */
.mt-panel-item{ position:relative;padding:0.5rem 0;}
.mt-panel-tip{ line-height:1.2rem; font-size:0.9rem; color:#333; padding:0 0.5rem; margin-bottom:0.5rem;}
.mt-item-btn a{ display:block; padding:0 1rem; float:right; border:solid 1px #ddd; color:#666; font-size:0.8rem; border-radius:0.2rem; line-height:2rem;}
.mt-item-btn a:active{color:#81c132; border-color:#81c132;}
.mt-item-btn:after{ display:block; clear:both; content:'';}
.mt-panel-item:after{ position:absolute; content:''; left:0; bottom:0; right:0; height:1px; background:#ddd;}
.mt-panel-item.define-pay:after{ left:0.5rem; right:0.5rem;}
.mt-panel-item.define-pay .mt-item-input{font-size: 1rem;color:#2398aa;text-align: center;}
.mt-panel-item.mini:after{ display:none;}
.mt-panel-item.mini .mt-item-main{ margin-left:0.5rem; margin-right:0.5rem; border:solid 1px #ccc; padding-right:0.3rem;}
.mt-panel-item.mini .mt-item-input{ border-radius:0.2rem;}
.mt-panel-item.active:after{background: -moz-linear-gradient(left, #81c132 0%, #2ed06c 100%);background: -webkit-gradient(linear, left center, right center, color-stop(0%,#81c132), color-stop(100%,#2ed06c));background: -webkit-linear-gradient(left, #81c132 0%,#2ed06c 100%);background: -o-linear-gradient(left, #81c132 0%,#2ed06c 100%);background: -ms-linear-gradient(left, #81c132 0%,#2ed06c 100%);background: linear-gradient(to right, #81c132 0%,#2ed06c 100%);}
.mt-item-label{ position:relative; font-size:0.8rem; white-space:nowrap; line-height:2rem;}
.mt-item-main{ position:relative;}
.mt-item-main.hard-level{ color:#9b9b9b;font-size:0.8rem;line-height: 2rem}
.mt-item-box{ position:relative; width:100%; box-sizing:border-box; height:2rem;}
.mt-item-input,.mt-item-text{ height:2rem; color:#9b9b9b; float:left; width:100%; box-sizing:border-box; border:none; font-size:0.8rem;}
.mt-item-input:after,.mt-item-text:after{ content:''; clear:both;}
.mt-item-input{ line-height:2rem;padding:0 0.5rem;}
.mt-item-text{ line-height:1rem; padding:0.5rem;}
.mt-item-phone{display:flex;flex-direction: column;color: #aaa;font-size: 0.8rem;overflow-y:hidden;padding: 1rem 0.5rem 0;}
.mt-item-phone .message{overflow-y: scroll;}
.mt-item-input::-webkit-input-placeholder,.mt-item-input::-moz-input-placeholder{ color:#9b9b9b;}
.mt-item-clear{ position:relative; color:#999; cursor:pointer; line-height:2rem; opacity:0;}
.mt-item-clear:active{ color:#666;}
.mt-item-clear.in{-webkit-animation:fadeIn .3s ease-in-out forwards;animation:fadeIn .3s ease-in-out forwards;}
.mt-item-clear.out{-webkit-animation:fadeOut .3s ease-in-out forwards;animation:fadeOut .3s ease-in-out forwards;}
.mt-item-code{ display:block; font-size:0.69rem; width:4.37rem;color:#FF3E3D; border:1px solid #FF3E3D;text-align:center; line-height:2rem; height:2rem;position:relative;color:#fff; border-radius:0.2rem; margin-left:0.5rem; cursor:pointer;}
.mt-item-code.disabled,.mt-item-code.disabled:active{ opacity:0.5; cursor:default;}
.mt-item-pic{ position:relative; height:2rem; width:5.5rem; margin-left:0.5rem; cursor:pointer; background:#f7f7f7; border-radius:0.2rem; overflow:hidden;}
.mt-item-txt{ position:relative; font-size:0.8rem; line-height:2rem;}
.mt-item-main .switch{ position:absolute; right:0; top:50%; margin-top:-0.9rem; }

/* 下载 */
.mt-download-container{position: fixed;left:0.43rem;right: 0.43rem;bottom: 0.43rem;border-radius: 0.53rem;background: rgba(0, 0, 0, 0.7);z-index: 999;}
.mt-download-container .text{font-size: 0.85rem;color:#fff;text-align: center;}
.mt-download-container .text.one{margin-top:0.8rem;}
.mt-download-container .text.three{margin:0.4rem 0;font-size: 0.69rem;}
.mt-download-content{height:2.6rem;align-items: center;padding:0 0.43rem;}
.mt-download-content .btn{display: block; width: 3.44rem;height: 1.87rem;line-height: 1.87rem;text-align: center;border-radius: 0.93rem;background: #002B64;color:#fff;font-size: 0.69rem;}
.mt-download-content .img-wrapper{width:2.13rem;height: 2.13rem;background: #f7f7f7;border-radius: 0.23rem;overflow: hidden;}
.mt-download-content .center{margin-left: 0.5rem;}
.mt-download-content .param{font-size:0.69rem;color:#fff;}

.coupon-wrap{
	.check-icon{
		display:block;
		width:1.07rem;
		height:1.07rem;
		background-size:100% 100%;
		background-position:center;
		background-repeat:no-repeat;
		border:.01rem solid #e3e3e3;
		border-radius:50%;
		&.checked{
			background-image:url(~@/assets/images/selected_icon.png);
		}
	}
	.coupon-item{
		margin:.85rem;
		padding:.85rem 0;
		border-radius:.13rem;
		background-size:100% 100%;
		background-position:center;
		background-repeat:no-repeat;
		background-image:url(~@/assets/images/coupon_border.png);
		&:last-child{
			margin-bottom:0;
		}
		.coupon-info{
			font-size:.59rem;
			color:#222;
			line-height:.8rem;
			.coupon-minus{
				margin-bottom:.4rem;
				font-size:1.28rem;
				font-weight:700;
				color:#FF0000;
				span{
					font-size:.8rem;
				}
			}
			.coupon-price{
				width:22.2%;
			}
			.coupon-content{
				position:relative;
				width:77.8%;
				padding-right:.43rem;
				.coupon-rules{
					width:80%;
					padding-left:.43rem;
					font-size:.69rem;
					color:#000;
					line-height:.8rem;
					text-align: left;
					.coupon-time{
						font-size:.59rem;
						opacity:0.54;
					}
					.coupon-time{
						margin-top:.59rem;
						font-size:.59rem;
						opacity:0.54;
					}
				}
				.coupon-get{
					width:2.6rem;
					height:1.6rem;
					border-radius:.8rem;
					font-size:.69rem;
					color:#FFFFFF;
					line-height:1.6rem;
					text-align:center;
					background:linear-gradient(45deg, #F38224 0%, #F0A953 100%);
					&.disabled{
						background: #888;
					}
				}
				.coupon-label{
					position:absolute;
					z-index:1;
					width:3.84rem;
					height:3.84rem;
					top:-.45rem;
					right:.43rem;
					background-size:100% 100%;
					background-position:center;
					background-repeat:no-repeat;
					&.expire{
						background-image:url(~@/assets/images/coupon_expire.png);
					}
					&.used{
						background-image:url(~@/assets/images/coupon_used.png);
					}
				}
			}
		}
	}
}
